import 'package:flutter/material.dart';
import '../../../utils/layout/layout_responsive.dart';
import '../../../utils/G.dart';

// 网格展示
class MyGrid extends StatefulWidget {
  List list;
  MyGrid({Key? key, required List this.list}) : super(key: key);

  @override
  _MyGridState createState() => _MyGridState();
}

class _MyGridState extends State<MyGrid> {
  @override
  Widget build(BuildContext context) {
    // @todo 优化网格显示，这里的网格展示不支持响应式
    return SliverGrid(
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          var item = widget.list[index];
          return InkWell(
              onTap: () {
                // 跳转到商品详情页
                Map<String, dynamic> p = {'id': item['id']};
                G.router.navigateTo(
                    context, '/product_detail' + G.parseQuery(params: p));
              },
              child: _renderGridItem(item));
        },
        childCount: widget.list.length,
      ),
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          crossAxisSpacing: 1,
          mainAxisSpacing: 1,
          childAspectRatio: 0.9),
    );
  }

  // 渲染网格元素
  Widget _renderGridItem(Map item) {
    return Container(
      width: _getWidth(),
      margin: const EdgeInsets.fromLTRB(5, 15, 5, 0),
      decoration: BoxDecoration(
          // borderRadius: BorderRadius.all(Radius.circular(10.0)),
          boxShadow: [
            BoxShadow(
                color: Colors.grey[300]!,
                offset: const Offset(4, 4),
                blurRadius: 10.0)
          ]),
      child: ClipRRect(
        borderRadius: const BorderRadius.all(Radius.circular(10)),
        child: Container(
            color: Colors.white,
            child: Column(children: [
              Image.network(
                item['image'],
                width: 100,
                height: 100,
              ),
              // G.imageWidget(
              //   item['image'],
              //   width: 100,
              //   height: 100,
              // ),
              Container(
                alignment: Alignment.topLeft,
                padding: const EdgeInsets.all(10),
                child: Column(
                  // mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      item['store_name'],
                      style: const TextStyle(
                        fontSize: 14,
                      ),
                      overflow: TextOverflow.ellipsis,
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          "￥ " + item['price'],
                          style:
                              const TextStyle(fontSize: 16, color: Colors.blue),
                          overflow: TextOverflow.ellipsis,
                        ),
                        Text(
                          "已售：" + item['sales'],
                          style:
                              const TextStyle(fontSize: 12, color: Colors.grey),
                          overflow: TextOverflow.ellipsis,
                        )
                      ],
                    )
                  ],
                ),
              ),
            ])),
      ),
    );
  }

  double _getWidth() {
    if (LayoutResponsive.isXS(context) || LayoutResponsive.isSM(context)) {
      return (G.width - 30) / 2;
    } else {
      return 220;
    }
  }
}
